<template>
    <div class="content">
        <el-form
            ref="ruleFormRef"
            style="height: 100%"
            :model="product"
            :rules="rules"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
        <div class="body">
            <div class="body_top">
                <div class="box">是否启用：<el-switch v-model="product.status" /></div>
                <div class="box">是否不计库存：<el-switch v-model="value1" /></div>
            </div>
            <div class="body_main">
                <div class="main_top">
                    <div class="main_top_left">
                        <div class="box">
                            <div>条码：</div>
                            <el-form-item prop="barcode">
                                <el-input v-model="product.barcode" :clearable=true></el-input>
                            </el-form-item>
                        </div>
                        <div class="box">
                            <div>品名：</div>
                            <el-form-item prop="name">
                                <el-input v-model="product.name" :clearable=true></el-input>
                            </el-form-item>
                        </div>
                        <div class="box">
                            <div>分类：</div>
                            <el-form-item prop="typeid">
                                <el-select v-model="product.typeid" placeholder="无" style="width: 240px">
                                    <el-option
                                        v-for="item in typeList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    />
                                </el-select>
                                <!-- <el-input v-model="product.typeid" :clearable=true></el-input> -->
                            </el-form-item>
                        </div>
                    </div>
                    <div class="main_top_right">
                        <el-image :src="product.thumb_text" style="width:100%" fit="contain"></el-image>
                    </div>
                </div>
                <div class="main_bottom">
                    <div class="box">
                        <div class="label">售价:</div>
                        <el-form-item prop="price">
                            <el-input v-model="product.price"></el-input>
                        </el-form-item>
                        <div>元</div>
                    </div>
                    <div class="box">
                        <div class="label">原价:</div>
                        <el-form-item prop="originalprice">
                            <el-input v-model="product.originalprice"></el-input>
                        </el-form-item>
                        <div>元</div>
                    </div>
                    <div class="box">
                        <div class="label">库存:</div>
                        <el-form-item prop="stock"> 
                            <el-input v-model="product.stock"></el-input>
                        </el-form-item>
                        <div>件</div>
                    </div>
                </div>
            </div>
            <div class="body_specifi">
                <div class="specifi_top">
                    <div class="box">
                        <div class="label">单位:</div>
                        <el-form-item prop="unit">
                            <el-input v-model="product.unit"></el-input>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="label">商品主规格:</div>
                        <el-form-item prop="specifi">
                            <el-input v-model="product.specifi"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="specifi_other">
                    <div class="box">其他规格</div>
                    <div class="specifi_list" v-show="specifiList.length > 0">
                        <div class="specifi_top">
                            <div class="col-t2 col-header">规格</div>
                            <div class="col-t1 col-header">售价</div>
                            <div class="col-t1 col-header">原价</div>
                            <div class="col-t1 col-header">库存</div>
                            <div class="col-t3 col-header">条码</div>
                        </div>
                        <div class="specifi_item" v-for="item,index in specifiList" :key="index">
                            <div class="col-t2 col-item">
                                <el-input v-model="item.name"></el-input>
                            </div>
                            <div class="col-t1 col-item">
                                <el-input v-model="item.price"></el-input>
                            </div>
                            <div class="col-t1 col-item">
                                <el-input v-model="item.originalprice"></el-input>
                            </div>
                            <div class="col-t1 col-item">
                                <el-input v-model="item.stock"></el-input>
                            </div>
                            <div class="col-t3 col-item">
                                <el-input v-model="item.barcode"></el-input> 
                            </div>
                        </div>
                    </div>
                    <div></div>
                    <div class="specifi_other_btn">
                        <el-button @click="addSpecifi">添加规格</el-button>
                    </div>
                </div>
            </div>
        
        </div>
        <div class="footer">
            <el-button @click="close">取消</el-button>
            <el-button @click="submitForm(ruleFormRef)">保存</el-button>
        </div>
    </el-form>
    </div>
</template>
<script setup>
import { h, onMounted, reactive, ref } from 'vue';
import http from "@/api/index"
import { ElMessage, ElNotification } from "element-plus";
const emit = defineEmits(["close"])
const { typeList,proId } = defineProps(['typeList','proId'])

const handleStatus = ref('add');
const close = ()=>{
    emit("close")
}
const formSize = ref('default')
const ruleFormRef = ref()
let product = ref({
    id:82,
    name:"",
    barcode:"",
    thumb_text:"",
    status:true,
    price:"",
    originalprice:"",
    specifi:"",
    stock:0,
    content:"",
    typeid:null,
    unit:"",
    type_name:""
})
//表单验证
const rules = reactive({
    barcode: [
    { required: true, message: '', trigger: 'blur' },
  ],
    name: [
    { required: true, message: '', trigger: 'blur' },
  ],
    typeid: [
    { required: true, message: '', trigger: 'blur' },
  ],
    price: [
    { required: true, message: '', trigger: 'blur' },
  ],
    originalprice: [
    { required: true, message: '', trigger: 'blur' },
  ],
    unit: [
    { required: true, message: '', trigger: 'blur' },
  ],
})
//规格列表
let specifiList = ref([])

let value1 = ref(true)     //是否不计库存

const addSpecifi = ()=>{    //添加规格
    var obj = {
        name:"",
        price:"",
        originalprice:"",
        stock:"",
        barcode:""
    }
    specifiList.value.push(obj)
    // console.log(specifiList.value)
}

onMounted(()=>{
    if(proId){
        handleStatus.value = 'edit'
        productInfo(proId)
    }else{
        handleStatus.value = 'add'
        return;
    }
})
//,保存按钮
const submitForm = async (formEl)=>{
    if(!formEl) return
    
    await formEl.validate((valid, fields) => {
        if (valid) {
            //商品信息
            var params = {
                name: product.value.name,
                barcode: product.value.barcode,
                typeid: product.value.typeid,
                originalprice: product.value.originalprice,
                unit:product.value.unit,
                price: product.value.price,
                status:product.value.status ? 1 : 0
            }
            if(product.value.specifi){
                params.specifi = product.value.specifi
            }
            if(product.value.purprice){
                params.purprice = product.value.purprice
            }
            if(handleStatus.value == 'edit'){
                params.proid = product.value.id
            }

            //规格信息
            editProduct(params)
            
        } else {
        console.log('error submit!')
        }
        
    })
}
//提交表单
const editProduct = async (params)=>{
    // console.log(params);
    //判断商品基本信息状态
    if(handleStatus.value == 'edit'){
        //修改
        var result = await http.productUpdate({params})
    }else if(handleStatus.value == 'add'){
        //新增
        var result = await http.addProduct({params});
    }

    if(result.data.status){
        ElNotification.success(result.data.message)
        var proid = result.data.data.id
        if(specifiList.value.length > 0) editSpecifi(proid)
    }else{
        ElNotification.error(result.data.message)
    }

   
}
//提交规格
const editSpecifi = async (proid)=>{
    var specifilist = specifiList.value
    //循环遍历规格
    specifilist.forEach(async (item,index)=>{
        if(item.id){
            //更新规格
            var params = {
                specifiid:item.id,
                name:item.name,
                barcode:item.barcode,
                price:item.price,
                originalprice:item.originalprice,
                stock:item.stock
            }
            var result = await http.specifiUpdate({params})
            if(!result.data.status){
                ElNotification.error(result.data.message + "-规格第" + index + 1 + "行");
            }
        }else{
            //新增规格
            var params = {
                proid,
                name:item.name,
                barcode:item.barcode,
                price:item.price,
                originalprice:item.originalprice,
                stock:item.stock
            }
            var result = await http.addSpecifi({params})
            if(!result.data.status){
                ElNotification.error(result.data.message + '-规格第' + index + 1 + "行")
            }
        }
    })
    close()
}
//获取商品详情
const productInfo = async (proid)=>{
    var params = {
        proid
    }
    var result = await http.productInfo({params})
    if(result){
        if(result.data.status){
            var status = result.data.data.proInfo.status
            var proInfo = result.data.data.proInfo
            var specifi = result.data.data.specifi
            proInfo.status = status ? true : false 
            product.value = result.data.data.proInfo
            specifiList.value = (specifi)
        }else{
            ElMessage.success(result.data.message)
        }

    }else{
        ElMessage.error("发送请求错误")
    }
}

</script>
<style>
@import "@/assets/css/editproduct.css";
</style>
<style scoped>
@import "@/assets/css/common.css";
</style>